:host {
  width: 100%;
}

.container {
  // 每行的间距
  --day-row-gap: 10px;
  // day__item的宽度和高度
  --day-item-width: 11.2vw;
  // day__item的文字颜色
  --day-text-color: #606266;
  --bottom-info-color: #c0c4cc;

  width: 100%;

  display: flex;
  flex-direction: column;

  .header {
    width: 100%;
    height: 44px;

    display: flex;
    justify-content: space-around;
    align-items: center;

    .arrow {
      width: 20px;
      height: 20px;

      &--left {
        transform: rotate(180deg);
      }
    }

    .title {
      width: 55%;

      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #010101;
    }
  }

  .week {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .week__item {
      width: 14.28%;
      height: 40px;

      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 14px;
      color: #333;
    }
  }

  .panel {
    width: 100%;
    height: calc(var(--day-item-width) * 6 + var(--day-row-gap) * 5);

    .day {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      place-items: center;
      row-gap: var(--day-row-gap);

      .day__item {
        width: var(--day-item-width);
        height: var(--day-item-width);

        display: grid;
        grid-template-rows: repeat(2, 1fr);
        justify-items: center;
        row-gap: 2px;

        .day-text {
          align-self: end;
          font-size: 14px;
          line-height: 14px;
          color: var(--day-text-color);
        }

        .bottom-info {
          font-size: 8px;
          line-height: 8px;
          color: var(--bottom-info-color);
        }

        &--today {
          --day-text-color: #fff;
          --bottom-info-color: #fff;

          position: relative;

          &::after {
            position: absolute;
            z-index: -1;

            content: '';
            width: 100%;
            height: 100%;
            background-color: #ff457a;
            border-radius: 50%;
          }
        }

        &--dot {
          position: relative;
          &::before {
            content: '';
            position: absolute;
            bottom: 1px;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 4px;
            background: var(--dot-color, #ff7499);
            border-radius: 50%;
          }

          &.day__item--today::before {
            background: #fff;
          }
        }
        &--selected {
          background: #ff457a;
          color: #fff;
          border-radius: 50%;
        }
        &--not-current-month {
          .day-text {
            color: #c0c4cc;
          }

          &:first-child,
          &:last-child {
            .day-text {
              color: rgba($color: #c0c4cc, $alpha: 0.5);
            }
          }
        }
      }
    }
  }
}
